<template>
	<view class="page">
		<!--评价筛选-->
		<view class="evaluate-data">
			<view class="evaluate-list">
				<view class="list" v-for="(item,index) in pageList" :key="index" v-if="pageList.lengt!=0">
					<view class="user-info">
						<view class="thumb">
							<image :src="item.user_avatar" mode=""></image>
						</view>
						<view class="nickname-grade flex flex-align flex-bt">
							<view class="nickname" style="width: 200rpx;">
								<text>{{item.user_name}}</text>
							</view>
							<view class="grade">
								<view class="star">
									<text class="cuIcon-favorfill lg text-gray" v-for="(instar,instr) in item.rating" :key="instr"></text>
								</view>
								<view class="date">
									<text>{{item.created_at}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="character">
							<text class="two-omit">{{item.content}}</text>
						</view>
						
						<view class="thumb-list">
							<view class="list" v-for="(value,idx) in item.img" @click="onPreview(item.img,idx)" :key="idx">
								<image :src="value" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="empty-box" v-if='pageList.length==0' style="padding-top: 100rpx;">
					<image src="/static/ic_nodata.png" mode=""></image>
					<view class="uni-text-gray">暂无数据~</view>
				</view>
			</view>
		</view>
		<!--视频播放-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVideoShow: false,
				urls: [
					'/static/img/yf_02.jpg',
					'/static/img/wen_01.jpg',
					'/static/img/class_01.jpg',
					'/static/img/yf_01.png'
				],
				videoContext: '',
				code: '',
				page:'',
				pageList:[],
				page:1
			};
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('evaluate-video')
		},
		onLoad(e) {
			this.code = e.goods_code
		},
		onShow() {
			let that = this
			that.page=1
			that.pageList = []
			that.getList()
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getList()
		},
		methods: {
			/**
			 * 图片点击预览
			 * @param item
			 * @param index
			 */
			onPreview(item, index) {
				uni.previewImage({
					urls: item,
					indicator: 'number',
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			/**
			 * 关闭视频点击
			 */
			onCloseVideo() {
				this.videoContext.pause();
				this.isVideoShow = false;
			},
			getList(){
				let that = this
				that.tui.request("api.data/goodsComment", "POST", {page:that.page,goods_code:that.code}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.pageList = that.pageList.concat(res.data.list)
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
	  background-color: #f6f6f6;padding-top: 5rpx;
	}
	
	/*评价筛选*/
	.evaluate-filtrate{
	  padding: 0 30rpx;
	  height: 200rpx;
	  background-color: #ffffff;
	  border-radius: 0 0 10rpx 10rpx;
	  .filtrate-list{
	    display: flex;
	    flex-wrap: wrap;
	    width: 100%;
	    padding: 20rpx 0;
	    .list{
	      display: flex;
	      margin-right: 20rpx;
	      margin-bottom: 20rpx;
	      text{
	        //display: inline-table;
	        padding: 6rpx 30rpx;
	        font-size: 24rpx;
	        color: #222222;
	        background-color:transparent;
	        border: 1px solid transparent;
	        border-radius: 60rpx;
	      }
	      .action{
	        border: 1px solid #333;
	        color: #333;
	      }
	    }
	  }
	}
	/* 评价 */
	.evaluate-data{
	  padding: 20rpx 30rpx;
	  background-color: #ffffff;
	  margin: 20rpx auto;
	  border-radius: 10rpx;
	  .evaluate-list{
	    width: 100%;
	    >.list{
	      border-bottom: 1px solid #f6f6f6;
	    }
	    .user-info{
	      display: flex;
	      align-items: center;
	      width: 100%;
	      height: 80rpx;
	      .thumb{
	        width:70rpx;
	        height: 60rpx;
	        image{
	          width: 100%;
	          height: 100%;
	          border-radius: 100%;
	        }
	      }
	      .nickname-grade{
	        width: 100%;
	        height: 60rpx;
	        margin-left: 20rpx;
	        .nickname{
	          display: flex;
	          align-items: center;
	          text{
	            font-size: 24rpx;
	            color: #212121;
	          }
	        }
	        .grade{
	          display: flex;
	          justify-content: space-between;
	          align-items: center;
	          width: 100%;
	          margin-top: 6rpx;
	          .star{
	            display: flex;
	            align-items: center;
	            text{
	              font-size: 24rpx;
	              color: #f20;
	            }
	          }
	          .date{
	            display: flex;
	            align-items: center;
	            text{
	              font-size: 24rpx;
	              color: #999999;
	            }
	          }
	        }
	      }
	    }
	    .content{
	      width: 100%;
	      .character{
	        display: flex;
	        align-items: center;
	        padding: 10rpx 0;
	        text{
	          font-size: 24rpx;
	          color: #333333;
	        }
	      }
	      .attr{
	        display: flex;
	        align-items: center;
	        padding: 10rpx 0;
	        text{
	          font-size: 24rpx;
	          color: #CCCCCC;
	        }
	      }
	      .thumb-list{
	        display: flex;
	        flex-wrap: wrap;
	        width: 100%;
	        //height: 200rpx;
	        margin: 10rpx 0;
	        .video-info{
	          position: relative;
	          width: 220rpx;
	          height: 220rpx;
	          margin-right: 2%;
	          .picture{
	            width: 100%;
	            height: 100%;
	          }
	          .shade{
	            position: absolute;
	            left: 0;
	            top: 0;
	            width: 100%;
	            height: 100%;
	            background-color: rgba(0,0,0,0.3);
	            text{
	              position: absolute;
	              left: 50%;
	              top: 50%;
	              font-size: 72rpx;
	              color: #ffffff;
	              transform: translate(-50%,-50%);
	            }
	          }
	        }
	        >.list{
	          width: 220rpx;
	          height: 220rpx;
	          margin-right: 2%;
	          margin-bottom: 15rpx;
	          image{
	            width: 100%;
	            height: 100%;
	          }
	        }
	        >.list:nth-child(3n){
	          margin-right: 0;
	        }
	      }
	    }
	  }
	}
	.video-win{
	  .cu-dialog{
	    background-color: transparent;
	  }
	  .bg-img{
	    background-color: transparent;
	    video{
	      width: 100%;
	    }
	  }
	}
	
</style>
